<template>
    <div id="line" :style="{height:height,width:width}"/>
</template>

<script>


export default {
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '300px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        xAxisData: {
            type: Array,
            default:()=>['1月', '2月', '3月', '4月', '5月', '6月']
        },
        // 标题
        title: {
            type: String,
            required: false
        },
        // 默认展示几个点
        showSize: {
            type: Number,
            default: 5,
            required: false
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    methods: {
        initChart() {
            let chartDom = document.getElementById('line')
            this.myChart = this.$echarts.init(chartDom)

            let option
            option = {
                grid: {
                    top: 80,
                    right: 40,
                    bottom: 40,
                    left: 40,
                    containLabel: true
                },
                legend: {
                    data: [
                        {
                            name: '订单量'
                        },
                        {
                            name: '时长'
                        }
                    ],
                    icon: 'rect',
                    itemWidth: 13,
                    itemHeight: 13,
                    itemGap: 40,
                    top: 30,
                    right: 30,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    }
                },
                xAxis: {
                    data: this.xAxisData,
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.45)'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.15)',
                            width: 0
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 10,
                        axisLabel: {
                            color: 'rgba(0, 0, 0, 0.45)'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.15)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        alignTicks: true,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: 'rgba(0, 0, 0, 0.45)'
                        }
                    }
                ],
                series: [
                    {
                        name: '订单量',
                        yAxisIndex: 0,
                        type: 'bar',
                        data: [820, 720, 930, 820, 580, 490],
                        barMaxWidth: 15,
                        itemStyle: {
                            borderRadius: [20, 20, 0, 0],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: -0.2,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#A7CEFF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#5B8FF9'
                                    }
                                ]
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'top',
                                color: '#1890FF'
                            }
                        }
                    },
                    {
                        name: '时长',
                        yAxisIndex: 1,
                        type: 'line',
                        data: [0.62, 0.41, 0.41, 0.19, 0.03, 0.12],
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            color: '#FF8C09'
                        },
                        itemStyle: {
                            color: '#FF8C09'
                        },
                        emphasis: {
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#FF8C09',
                                align: 'left',
                                offset: [10, 5]
                            }
                        }
                    }
                ]
            }
            this.myChart.setOption(option)
            // 监听window窗口大小变化的事件
            window.addEventListener('resize', () => {
                this.myChart.resize()
            })
        }
    }
}
</script>
